<!--
	Desc: 	学校表的编辑界面
	Author: ${author}
	Date: 	2019-07-19 12:30:35
-->

<template>
  <el-dialog
    v-loading="dialogLoading"
    :title="!dataForm.id ? '新增学校表' : '修改学校表'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="visible"
    width="80%"
    top="8vh">
    <el-form v-loading="formLoading" ref="dataForm" :size="size" :model="dataForm" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="学校名称" prop="schoolName">
            <el-input v-model="dataForm.schoolName" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="input类型" prop="a1">
            <el-input v-model="dataForm.a1" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="number类型" prop="a2">
            <el-input v-model="dataForm.a2" type="number" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="radio类型" prop="a3">
            <el-radio-group v-model="dataForm.a3">
              <el-radio v-for="(item,index) in getDict('dept')" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="checkbox类型" prop="a4">
            <el-checkbox-group v-model="dataForm.a4">
              <el-checkbox v-for="(item,index) in getDict('dept')" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="计数器类型" prop="a5">
            <el-input-number v-model="dataForm.a5"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="select类型" prop="a6">
            <el-select v-model="dataForm.a6" placeholder="请选择" clearable>
              <el-option v-for="(item,index) in getDict('dept')" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="级联选择器" prop="a7">
            <el-cascader
              v-model="dataForm.a7"
              :options="getDict('regionData')"
              :props="{
                value: 'code',
                label: 'name',
                children: 'cell'
              }"
              filterable
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="日期组件" prop="a8">
            <el-date-picker v-model="dataForm.a8" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间" clearable/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item :rules="$rulesFilter({required:true})" label="日期间隔组件" prop="a9">
            <el-date-picker v-model="dataForm.a9" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item label="远程搜索select" prop="unit">
            <el-select
              v-model="dataForm.a10"
              :loading="remoteSelectLoading"
              :remote-method="remoteMethodOfSelect"
              clearable
              filterable
              remote
              placeholder="请输入"
              reserve-keyword>
              <el-option
                v-for="item in remoteSelectOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item :rules="$rulesFilter({required:true})" :label="'树形下拉单选'" prop="a11">
          <el-popover ref="treeListPopover" v-model="treeListVisible" placement="bottom-start" trigger="click">
            <el-tree
              ref="deptListTree"
              :data="treeList"
              :props="{ label: 'schoolName', children: 'children' }"
              :highlight-current="true"
              :expand-on-click-node="false"
              node-key="id"
              accordion
              @current-change="treeCurrentChangeHandle"/>
          </el-popover>
          <el-input
            v-popover:treeListPopover
            v-model="dataForm.a11"
            :readonly="true"
            :placeholder="'树形下拉单选'"/>
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixinFormViewModule from '@/mixins/form-view-module'
import dataDictionary from '@/mixins/data-dictionary'
import * as API from '@/api/school'
export default {
  mixins: [mixinFormViewModule, dataDictionary],
  data() {
    return {
      mixinViewModuleOptions: {
        getInfoAPI: API.info, // 数据详情列表接口，API地址

        addAPI: API.add, // 新增接口，API地址
        updateAPI: API.update // 修改接口，API地址
      },

      dataForm: {
        id: 0,
        schoolName: '',
        area: '',
        type: '',
        age: '',
        a1: '',
        a2: '',
        a3: '',
        a4: [],
        a5: '',
        a6: '',
        a7: '',
        a8: '',
        a9: '',
        a10: '',
        a11: ''

      },

      remoteSelectLoading: false,
      remoteSelectOptions: [],

      treeList: [],
      treeListVisible: false
    }
  },
  methods: {
    initInfoBefore(id) {
      this.getTreeList()
    },

    initInfoAfter(id, callbackData) {

    },
    // 获取远程搜索接口数据
    remoteMethodOfSelect(query) {
      if (query !== '') {
        this.remoteSelectLoading = true

        API.list(query).then(response => {
          if (response.code === 0) {
            this.remoteSelectOptions = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
          this.remoteSelectLoading = false
        }).catch(error => {
          console.log(error)
          this.remoteSelectLoading = false
        })
      } else {
        this.remoteSelectOptions = []
      }
    },

    // 获取树形列表数据
    getTreeList() {
      return API.list({}).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.treeList = res.data.list
      }).catch(() => {
      })
    },

    // 上级树形, 选中
    treeCurrentChangeHandle(data) {
      this.dataForm.a11_id = data.id
      this.dataForm.a11 = data.schoolName
      this.treeListVisible = false
    }
  }
}
</script>
